<template>
	<view class="coupon" v-if="status==1">
		<view class='po'>
			<None v-if="list_empty"></None>
			<view v-for="(item,index) of list" :key="index">
				<view class='coupons'>
					<view class='cou_t'>
						<view class='cou_t_l'>
							<view :class='class_name'><span>¥</span>{{item.reduce*10000/10000}}</view>
						</view>
						<view class='cou_t_r'>
							<view class='cou_t_r_01' v-if="item.full==0">减{{item.reduce*10000/10000}}</view>
							<view class='cou_t_r_01' v-else>满{{Math.floor(item.full)*10000/10000}} 减{{Math.floor(item.reduce)}}</view>
							<block v-if="open_type == 'all'">
								<view class='cou_t_r_02'>有效期至：{{item.end_time}}</view>
							</block>

							<block v-else-if="open_type == 'my'">
								<view class='cou_t_r_02'>有效期至：{{item.user_coupon_end_time | formatTime}}</view>
							</block>
						</view>
						<block v-if="open_type == 'all'">
							<view class='cou_t_rr' v-if="item.user_status == 1">
								<view class="" @click="addCoupon(item.coupon_id)">领取</view>
							</view>
							<view class='cou_t_rr_1' v-if="item.user_status == 0">
								<view class="">已领</view>
							</view>
						</block>
						<block v-else-if="open_type == 'my'">
							<view class='cou_t_rr_1' v-if="item.coupon_status == 2">
								<view class="">已使用</view>
							</view>
							<view class='cou_t_rr_1' v-if="item.coupon_status == 3">
								<view class="">已过期</view>
							</view>
							<view class='cou_t_rr' v-if="item.coupon_status == 1" @click="jump_buy">
								<view class="">去使用</view>
							</view>
						</block>
					</view>
					<!-- <view class='cou_d' v-if="item.goods_ids == '0'">全平台优惠券</view>
					<view class='cou_d' v-else>部分商品可用</view> -->
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	// import usercoupon from "@/api/user_coupon.js"
	import None from '../../components/none.vue'
	export default {
		components: {
			None
		},
		data() {
			return {
				coupon: [],
				c_index: 0,
				list:[],
				allList: [],
				myList: [],
				class_name: 'cou_t_l_01',
				list_empty: true,
				open_type: 'all',
				status:3
			};
		},
		onLoad(options) {
			let _this = this;
			uni.request({
				url: 'https://apiorder.wzq0307.com/api/Status/index',
				method: 'GET',
				data: {},
				success: (res) => {
					console.log(11111,res.data.data.status);
					_this.status=res.data.data.status;
						uni.setStorage('status',res.data.data.status);
				},
				fail: function(e) {
					console.log(JSON.stringify(e));
				}
			})
			if (!uni.getStorageSync('openid')) {
				uni.showModal({
					title: '尚未登录',
					content: '是否要前往登录页面',
					success: function(res) {
						if (res.confirm) { //这里是点击了确定以后
							// console.log('用户点击确定')
							uni.reLaunch({
								url: '../my/my'
							})
						} else { //这里是点击了取消以后
							// console.log('用户点击取消')
						}
					}
				})
			}else{
				if (options.type == 'all') {
					this.open_type = 'all'
				} else if(options.type == 'my'){
					this.open_type = 'my'
				}
				this.getCouponInfo()
			}
			
		},
		filters: {
			formatTime: function(time) {
				let date = new Date(time * 1000);
				let year = date.getFullYear();
				let month = (date.getMonth() + 1).toString().padStart(2, '0');
				let day = date.getDate().toString().padStart(2, '0');
				return year + "-" + month + "-" + day;
			}
		},
		methods: {
			jump_buy() {
				uni.reLaunch({
					url: '../home/home'
				})
			},
			//领取优惠券
			addCoupon(couponId) {
				let _this = this;
				uni.request({
					url: 'https://apiorder.wzq0307.com/api/UserCoupon/add',
					method: 'POST',
					data: {
						open_id: uni.getStorageSync('openid'),
						coupon_id:couponId
					},
					success: (res) => {
						console.log(res);
						if (res.data.status == 0) {
							console.log("1211111", res)
							uni.showToast({
								title:'领取成功'
							})
							this.getCouponInfo()
						} else {
							uni.showLoading({
								title: '领取失败'
							});
							setTimeout(function() {
								uni.hideLoading();
							}, 2000);
						}
					},
					fail: function(e) {
						console.log(JSON.stringify(e));
					}
				})
			},
			//获取优惠卷信息
			getCouponInfo() {
				let _this = this;
				uni.request({
					url: 'https://apiorder.wzq0307.com/api/UserCoupon/my',
					method: 'GET',
					data: {
						open_id: uni.getStorageSync('openid')
					},
					success: (res) => {
						console.log(res);
						if (res.data.status == 0) {
							console.log("1211111", res)
							if(_this.open_type == 'all'){
								_this.list = res.data.data.couponList
							}else if(_this.open_type == 'my'){
								let myArr = [];			//我的优惠卷
								res.data.data.couponList.forEach(element => {
									if(element.user_status == 0){
										myArr.push(element)
									}
								})
								_this.list = myArr
							}
							if (_this.list.length > 0) {
								_this.list_empty = false
							}
						} else {
							uni.showLoading({
								title: '获取满减列表失败'
							});
							setTimeout(function() {
								uni.hideLoading();
							}, 2000);
						}
					},
					fail: function(e) {
						console.log(JSON.stringify(e));
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.coupon {
		background-color: #F8F8F8;
		min-height: 100vh;

		.po {
			z-index: 99;
			width: 100%;
			padding-top: 15px;
		}

		.tab {
			padding: 10px 10px 0;
			display: flex;
			width: 100%;
			font-size: 14px;
			background-color: #fff;
		}

		.bb {
			padding-bottom: 5px;
			text-align: center;
			width: 50%;
		}

		.xz {
			border-bottom: 2px solid red;
			padding-bottom: 5px;
			width: 50%;
			text-align: center;
		}

		.coupons {
			margin: 15px;
			background-color: #fff;
			border: 1px solid #EEEEEE;
			border-radius: 5px;
			box-shadow: 2px 2px 2px #EEEEEE;
			color: #9FA0A2;
			min-height: 10px;
		}

		.cou_t {
			display: flex;
			padding: 20px 10px 10px;
			justify-content: space-between;
			font-size: 12px;
			width: 100%;
			box-sizing: border-box;
		}

		.cou_t_l {
			width: 20%;
			flex-shrink: 0;
		}

		.cou_t_r {
			width: 55%;
			box-sizing: border-box;
			padding-left: 10px;
		}

		.cou_t_rr {
			width: 70px;
			background-color: #EB113E;
			color: #fff;
			height: 25px;
			line-height: 25px;
			font-size: 12px;
			text-align: center;
			margin: 15px 0 0 10px;
			border-radius: 20px;
		}

		.cou_t_rr_1 {
			width: 70px;
			background-color: #BEBEBE;
			color: #fff;
			height: 25px;
			line-height: 25px;
			font-size: 12px;
			text-align: center;
			margin: 15px 0 0 10px;
			border-radius: 20px;
		}

		.cou_t_l_01 {
			color: #FF4444;
			font-size: 26px;
			padding-top: 8px;
		}

		.cou_t_l_01 span {
			font-size: 12px;
		}

		.cou_sss {
			font-size: 32px;
		}

		.cou_sss span {
			font-size: 12px;
		}

		.cou_t_r_01 {
			font-size: 18px;
			color: #323233;
			padding: 3px 0 5px;
		}

		.cou_d {
			background-color: #FAFAFA;
			padding: 6px 15px;
			border-top: 1px dashed #EBEDF0;
			font-size: 12px;
		}

		.H50 {
			height: 50px;
		}

		.btn {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 45px;
			line-height: 45px;
			text-align: center;
			border-top: 1px solid #EEEEEE;
			z-index: 999;
			font-size: 14px;
			background-color: #fff;
		}
	}
</style>
